<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备系统" prop="systemId">
<!--        <el-input-->
<!--          v-model="queryParams.systemId"-->
<!--          placeholder="请输入设备系统"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
        <el-select v-model="queryParams.systemId" placeholder="请选择">
          <el-option
            v-for="item in systeminfoList"
            :key="item.systemId"
            :label="item.systemName"
            :value="item.systemId"
            clearable
          >
            {{ item.systemName }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品类型" prop="typeId">
<!--        <el-input-->
<!--          v-model="queryParams.typeId"-->
<!--          placeholder="请输入产品类型"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
        <el-select v-model="queryParams.typeId" placeholder="请选择">
          <el-option
            v-for="item in devicetypeList"
            :key="item.typeId"
            :label="item.title"
            :value="item.typeId"
            clearable
          >
            {{ item.title }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备屏幕" prop="dzbqTypeId">
<!--        <el-input-->
<!--          v-model="queryParams.dzbqTypeId"-->
<!--          placeholder="请输入设备屏幕"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
        <el-select v-model="queryParams.dzbqTypeId" filterable  placeholder="请选择" >
          <el-option
            v-for="item in dzbqtypeList"
            :key="item.dzbqTypeId"
            :label="item.dzbqTitle"
            :value="item.dzbqTypeId"
            clearable
          >
            {{ item.dzbqTitle }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="制造商" prop="manufacturerId">
        <el-input
          v-model="queryParams.manufacturerId"
          placeholder="请输入制造商"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属客户" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入所属客户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="代理人" prop="agentId">
        <el-input
          v-model="queryParams.agentId"
          placeholder="请输入代理人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商家店铺" prop="storeId">
        <el-input
          v-model="queryParams.storeId"
          placeholder="请输入商家店铺"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="购买方式" prop="useMode">
        <el-select v-model="queryParams.useMode" placeholder="请选择购买方式" clearable>
          <el-option
            v-for="dict in dict.type.use_mode"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否删除" prop="isDeleted">
        <el-select v-model="queryParams.isDeleted" placeholder="请选择是否删除" clearable>
          <el-option
            v-for="dict in dict.type.yes_or_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="设备状态" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择设备状态" clearable>
          <el-option
            v-for="dict in dict.type.device_state"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:deviceinfo:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:deviceinfo:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:deviceinfo:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:deviceinfo:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deviceinfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="设备ID">
              <span>{{ props.row.deviceId }}</span>
            </el-form-item>
            <el-form-item label="使用开始时间">
              <span>{{ parseTime(props.row.beginDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
            <el-form-item label="使用结束时间">
              <span>{{ parseTime(props.row.endDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="默认模板">
              <span>{{ props.row.defaultTemplate }}</span>
            </el-form-item>
            <el-form-item label="默认图片">
              <span>{{ props.row.defaultImg }}</span>
            </el-form-item>
            <el-form-item label="更新周期">
              <span>{{ props.row.updateCycle }} 天</span>
            </el-form-item>
            <el-form-item label="最后更新">
              <span>{{ parseTime(props.row.lastUpdateDate, '{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </el-form-item>
            <el-form-item label="最后下载">
              <span>{{ parseTime(props.row.lastDownDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
            <el-form-item label="绑定图片">
              <span>{{ props.row.bindImg }}</span>
            </el-form-item>
            <el-form-item label="绑定图片数据">
              <span>{{ props.row.bindImgData }}</span>
            </el-form-item>
            <el-form-item label="绑定图片数据">
              <span>{{ props.row.bindImgData }}</span>
            </el-form-item>
            <el-form-item label="固件是否升级">
              <span>{{ props.row.firmwareUpgrade }}</span>
            </el-form-item>
            <el-form-item label="固件是否升级">
              <span>{{ props.row.firmwareUpgradeResult }}</span>
            </el-form-item>
            <el-form-item label="固件升级时间">
              <span>{{ parseTime(props.row.firmwareUpgradeTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
            <el-form-item label="超时更新周期">
              <span>{{ props.row.timeOutUpdateCycle }}</span>
            </el-form-item>
            <el-form-item label="固件升级时间">
              <span>{{ parseTime(props.row.updateDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
            <el-form-item label="纬度">
              <span>{{ props.row.lat }}</span>
            </el-form-item>
            <el-form-item label="经度">
              <span>{{ props.row.lng }}</span>
            </el-form-item>
            <el-form-item label="国家">
              <span>{{ props.row.nation }}</span>
            </el-form-item>
            <el-form-item label="省份">
              <span>{{ props.row.province }}</span>
            </el-form-item>
            <el-form-item label="城市">
              <span>{{ props.row.city }}</span>
            </el-form-item>
            <el-form-item label="行政区">
              <span>{{ props.row.district }}</span>
            </el-form-item>
            <el-form-item label="强制更新">
              <span>{{ props.row.forceUpdate }}</span>
            </el-form-item>
            <el-form-item label="强制更新">
              <span>{{ props.row.flow }}</span>
            </el-form-item>
            <el-form-item label="最后激活IP">
              <span>{{ props.row.lastActiveIp }}</span>
            </el-form-item>
            <el-form-item label="创建者ID">
              <span>{{ props.row.createUserId }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.dateCreated}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="设备ID" align="center" prop="deviceId" />
      <el-table-column label="设备图片" align="center" prop="img" />
      <el-table-column label="电量" align="center" prop="power" sortable />
      <el-table-column label="流量" align="center" prop="flow" sortable />
      <el-table-column label="信号值" align="center" prop="singal" sortable />
      <el-table-column label="充电次数" align="center" prop="chargeTimes"  sortable/>
      <el-table-column label="产品类型" align="center" prop="typeId"  sortable :formatter="devicetypeFormat" />
      <el-table-column label="屏幕型号" align="center" prop="dzbqTypeId"  sortable :formatter="dzbqtypeFormat" />
      <el-table-column label="系统类型" align="center" prop="systemId"  sortable :formatter="systeminfoFormat" />
      <el-table-column label="商家店铺" align="center" prop="storeId" sortable />
      <el-table-column label="购买方式" align="center" prop="useMode" sortable
                       :filters="[{ text: '购买', value: 1 }, { text: '租用', value: 2 }]"
                       :filter-method="filterTag"
                      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.use_mode"
                    :value="scope.row.useMode"
          />
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" prop="price" sortable/>

      <el-table-column label="是否删除" align="center" prop="isDeleted" sortable
                       :filters="[{ text: '已删除', value: 1 }, { text: '未删除', value: 0 }]"
                       :filter-method="filterTag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yes_or_no" :value="scope.row.isDeleted"/>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="state" sortable>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.device_state" :value="scope.row.state"/>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:deviceinfo:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:deviceinfo:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="制造商" prop="manufacturerId">
<!--              <el-input v-model="form.manufacturerId" placeholder="请输入制造商" />-->
              <el-select v-model="form.manufacturerId" placeholder="请选择" filterable clearable >
                <el-option :key="0" :value="0" :label="请选择">请选择</el-option>
                <el-option
                  v-for="item in manufacturerList"
                  :key="item.manufacturerId"
                  :label="item.manufacturerName"
                  :value="item.manufacturerId"
                >
                  {{ item.manufacturerName }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理器" prop="cpuId">
<!--              <el-input v-model="form.cpuId" placeholder="请输入处理器" />-->
                <el-select v-model="form.cpuId" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in cpuinfoList"
                    :key="item.cpuId"
                    :label="item.name"
                    :value="item.cpuId"
                  >
                    {{ item.name }}
                  </el-option>
                </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="电量" prop="power">
              <el-input v-model="form.power" placeholder="请输入电量" >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信号值" prop="singal">
              <el-input v-model="form.singal" placeholder="请输入信号强度" >
                <template slot="append">ASU</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="流量" prop="flow">
              <el-input v-model="form.flow" placeholder="请输入流量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充电次数" prop="chargeTimes">
              <el-input v-model="form.chargeTimes" placeholder="请输入充电次数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备系统" prop="systemId">
              <el-select v-model="form.systemId" placeholder="请选择">
                <el-option
                  v-for="item in systeminfoList"
                  :key="item.systemId"
                  :label="item.systemName"
                  :value="item.systemId"
                >
                  {{ item.systemName }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类型" prop="typeId">
              <el-select v-model="form.typeId" placeholder="请选择">
                <el-option
                  v-for="item in devicetypeList"
                  :key="item.typeId"
                  :label="item.title"
                  :value="item.typeId"
                >
                  {{ item.title }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备屏幕" prop="dzbqTypeId">
              <el-select v-model="form.dzbqTypeId" placeholder="请选择">
                <el-option
                  v-for="item in dzbqtypeList"
                  :key="item.dzbqTypeId"
                  :label="item.dzbqTitle"
                  :value="item.dzbqTypeId"
                >
                  {{ item.dzbqTitle }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="812">

          </el-col>
        </el-row>
        <el-form-item label="描述" prop="description">
          <!--          <el-input v-model="form.description" placeholder="请输入描述" />-->
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
            v-model="form.description">
          </el-input>
        </el-form-item>

        <el-divider content-position="center">设备部署</el-divider>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="代理人" prop="agentId">
              <el-input v-model="form.agentId" placeholder="请输入代理人" />
            </el-form-item>
          </el-col>
          <el-col :span="812">
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="所属客户" prop="userId">
              <el-input v-model="form.userId" placeholder="请输入所属客户" />
            </el-form-item>
          </el-col>
          <el-col :span="812">
            <el-form-item label="商家店铺" prop="storeId">
              <el-input v-model="form.storeId" placeholder="请输入商家店铺" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="购买方式" prop="useMode">
              <el-select v-model="form.useMode" placeholder="请选择购买方式">
                <el-option
                  v-for="dict in dict.type.use_mode"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price" placeholder="请输入价格" >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="使用开始时间" prop="beginDate">
              <el-date-picker style="width: 205px;" clearable
                              v-model="form.beginDate"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择使用开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用结束时间" prop="endDate">
              <el-date-picker style="width: 205px;" clearable
                              v-model="form.endDate"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择使用结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-divider content-position="center">模板</el-divider>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="默认模板" prop="defaultTemplate">
            <el-input v-model="form.defaultTemplate" placeholder="请输入默认模板" />
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认图像" prop="defaultImg">
              <el-input v-model="form.defaultImg" placeholder="请输入默认图像" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="center">更新情况</el-divider>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="最后下载" prop="lastDownDate">
              <el-date-picker style="width: 205px;" clearable
                              v-model="form.lastDownDate"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择最后下载">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-form-item label="最后更新" prop="lastUpdateDate">
            <el-date-picker style="width: 205px;" clearable
                            v-model="form.lastUpdateDate"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择最后更新">
            </el-date-picker>
          </el-form-item>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="更新周期" prop="updateCycle">
              <el-input v-model="form.updateCycle" placeholder="请输入更新周期">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="最后激活IP" prop="lastActiveIp">
                <el-input v-model="form.lastActiveIp" placeholder="请输入最后激活IP" />
              </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="强制更新" prop="forceUpdate">
              <el-select v-model="form.forceUpdate" placeholder="请选择强制更新">
                <el-option
                  v-for="dict in dict.type.yes_or_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超时更新周期" prop="timeOutUpdateCycle">
              <el-input v-model="form.timeOutUpdateCycle" placeholder="请输入超时更新周期" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="center">标签图片</el-divider>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="图片ID" prop="imgId">
              <el-input v-model="form.imgId" placeholder="请输入图片ID" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="图片" prop="img">
              <el-input v-model="form.img" placeholder="请输入图片" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="绑定图片" prop="bindImg">
          <el-input v-model="form.bindImg" placeholder="请输入绑定图片" />
        </el-form-item>
        <el-form-item label="绑定图片数据" prop="bindImgData">
          <el-input type="textarea"
                    :rows="3"
                    v-model="form.bindImgData"
                    placeholder="请输入绑定图片数据"/>
        </el-form-item>

        <el-divider content-position="center">固件相关</el-divider>
        <el-form-item label="固件是否升级" prop="firmwareUpgrade">
          <el-select v-model="form.firmwareUpgrade" placeholder="请选择固件是否升级">
            <el-option
              v-for="dict in dict.type.yes_or_no"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="固件升级状态" prop="firmwareUpgradeResult">
          <el-select v-model="form.firmwareUpgradeResult" placeholder="请选择固件升级状态">
            <el-option
              v-for="dict in dict.type.firmware_upgrade_result"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="固件升级时间" prop="firmwareUpgradeTime">
          <el-date-picker clearable
            v-model="form.firmwareUpgradeTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择固件升级时间">
          </el-date-picker>
        </el-form-item>
        <el-divider content-position="center">其他</el-divider>

        <el-form-item label="状态" prop="state">
          <el-select v-model="form.state" placeholder="请选择状态">
            <el-option
              v-for="dict in dict.type.device_state"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新日期" prop="updateDate">
          <el-date-picker clearable
            v-model="form.updateDate"
            type="datetime"
            value-format="yyyy-MM-dd"
            placeholder="请选择更新日期">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="创建者ID" prop="createUserId">
          <el-input v-model="form.createUserId" placeholder="请输入创建者ID" />
        </el-form-item>
        <el-form-item label="创建时间" prop="dateCreated">
          <el-date-picker clearable
            v-model="form.dateCreated"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
  }
</style>
<script>
import { listDeviceinfo, getDeviceinfo, delDeviceinfo, addDeviceinfo, updateDeviceinfo } from "@/api/system/deviceinfo";
import { listDzbqtype } from "@/api/system/dzbqtype";
import { listDevicetype } from "@/api/system/devicetype";
import { listSysteminfo } from "@/api/system/systeminfo";
import { listCpuinfo } from "@/api/system/cpuinfo";
import { listDeviceinfomanufacturers } from "@/api/system/deviceinfomanufacturers";

export default {
  name: "Deviceinfo",
  dicts: ['use_mode', 'firmware_upgrade_result', 'yes_or_no', 'device_state', 'rotate_flip_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备信息表格数据
      deviceinfoList: [],
      // 这里的定义下拉框模型
      cpuinfoList: [],
      manufacturerList: [],
      devicetypeList:[],
      systeminfoList:[],
      dzbqtypeList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        systemId: null,
        typeId: null,
        dzbqTypeId: null,
        manufacturerId: null,
        userId: null,
        agentId: null,
        storeId: null,
        useMode: null,
        price: null,
        beginDate: null,
        endDate: null,
        description: null,
        isDeleted: null,
        defaultTemplate: null,
        defaultImg: null,
        updateCycle: null,
        lastUpdateDate: null,
        lastDownDate: null,
        cpuId: null,
        power: null,
        singal: null,
        flow: null,
        chargeTimes: null,
        imgId: null,
        img: null,
        bindImg: null,
        bindImgData: null,
        firmwareUpgrade: null,
        firmwareUpgradeResult: null,
        firmwareUpgradeTime: null,
        timeOutUpdateCycle: null,
        state: null,
        updateDate: null,
        lastActiveIp: null,
        lat: null,
        lng: null,
        nation: null,
        province: null,
        city: null,
        district: null,
        forceUpdate: null,
        createUserId: null,
        dateCreated: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        systemId: [
          { required: true, message: "设备系统不能为空", trigger: "blur" }
        ],
        typeId: [
          { required: true, message: "产品类型产品类型不能为空", trigger: "blur" }
        ],
        dzbqTypeId: [
          { required: true, message: "设备屏幕不能为空", trigger: "blur" }
        ],
        useMode: [
          { required: true, message: "购买方式不能为空", trigger: "change" }
        ],
        state: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    /** 查询设备信息列表 */
    getList() {
      this.loading = true;
      listDeviceinfo(this.queryParams).then(response => {
        this.deviceinfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // 在getList里面添加模型数据获取代码，调用导入的listCategory方法
      listCpuinfo({}).then(response=> {
        if(response.rows) {
          this.cpuinfoList=response.rows;
        }
      });
      listDeviceinfomanufacturers({}).then(response=> {
        if(response.rows) {
          this.manufacturerList=response.rows;
        }
      });
      listDevicetype({}).then(response=> {
        if(response.rows) {
          this.devicetypeList=response.rows;
        }
      });
      listDzbqtype({}).then(response=> {
          if(response.rows) {
            this.dzbqtypeList=response.rows;
          }
      });
      listSysteminfo({}).then(response=> {
          if(response.rows) {
            this.systeminfoList=response.rows;
          }
      });
    },
    // 格式化分类为名称
    devicetypeFormat(row){
      const devicetype = this.devicetypeList.find(filed => filed.typeId===row.typeId);
      return devicetype===undefined ?'undefined':devicetype.title;
    },
    // 格式化分类为名称
    dzbqtypeFormat(row){
      const dzbqtype = this.dzbqtypeList.find(filed => filed.dzbqTypeId===row.dzbqTypeId);
      return dzbqtype===undefined ?'undefined':dzbqtype.dzbqTitle;
    },
    // 格式化分类为名称
    systeminfoFormat(row){
      const systeminfo = this.systeminfoList.find(filed => filed.systemId===row.systemId);
      return systeminfo===undefined ?'undefined':systeminfo.systemName;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deviceId: null,
        systemId: null,
        typeId: null,
        dzbqTypeId: null,
        manufacturerId: null,
        userId: null,
        agentId: null,
        storeId: null,
        useMode: null,
        price: null,
        beginDate: null,
        endDate: null,
        description: null,
        isDeleted: null,
        defaultTemplate: null,
        defaultImg: null,
        cardNumber: null,
        cardBeginDate: null,
        cardRechargeDate: null,
        cardUseDate: null,
        updateCycle: null,
        lastUpdateDate: null,
        lastDownDate: null,
        updateImg: null,
        updateSpeed: null,
        updateUrl: null,
        updateDefaultImg: null,
        cpuId: null,
        power: null,
        singal: null,
        flow: null,
        chargeTimes: null,
        imgId: null,
        img: null,
        bindImg: null,
        bindImgData: null,
        firmwareUpgrade: null,
        firmwareUpgradeResult: null,
        firmwareUpgradeTime: null,
        timeOutUpdateCycle: null,
        state: null,
        rotateFlip: null,
        rotateType: null,
        flipType: null,
        updateDate: null,
        lastActiveIp: null,
        lat: null,
        lng: null,
        nation: null,
        province: null,
        city: null,
        district: null,
        forceUpdate: null,
        createUserId: null,
        dateCreated: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.deviceId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const deviceId = row.deviceId || this.ids
      getDeviceinfo(deviceId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deviceId != null) {
            updateDeviceinfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDeviceinfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const deviceIds = row.deviceId || this.ids;
      this.$modal.confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项？').then(function() {
        return delDeviceinfo(deviceIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/deviceinfo/export', {
        ...this.queryParams
      }, `deviceinfo_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
